<div>
  <div class="l-group">
    <form nz-form [nzLayout]="validateForm.controls?.formLayout?.value" 
      [formGroup]="validateForm" (ngSubmit)="submitForm()">

      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="2">
          <label nz-form-item-required>原料名称</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="6">
          <nz-input [(ngModel)]="materialParams.name" formControlName="materialName" [nzSize]="'large'">
          </nz-input>
          <div nz-form-explain *ngIf="validateForm.controls.materialName.dirty&&validateForm.controls.materialName.hasError('required')">请输入原料名称!</div>
        </div>
      </div>

      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="2">
          <label nz-form-item-required>用量单位</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="6">
          <nz-select formControlName="dosageSelect" [(ngModel)]="materialParams.unit" [nzPlaceHolder]="'请选择用量单位'" [nzSize]="'large'">
            <nz-option 
              *ngFor="let type of materialType"
              [nzLabel]="type['value']" [nzValue]="type['key']">
            </nz-option>
          </nz-select>
          <div nz-form-explain *ngIf="validateForm.controls.dosageSelect.dirty&&validateForm.controls.dosageSelect.hasError('required')">请选择用量单位!</div>
        </div>
      </div>

    </form>
  </div>

  <div class="l-group">
    <h3>关联商品</h3>
  </div>
  
  <div class="l-group">
    <nz-table #nzTable [nzAjaxData]="materialParams.materialLists"
      [nzLoading]="_loading"
      [nzIsPagination]="false"
      nzBordered>
      <thead nz-thead>
        <tr>
          <th nz-th><span>操作</span></th>
          <th nz-th><span>商品编号</span></th>
          <th nz-th><span>商品名称</span></th>
          <th nz-th><span>上架状态</span></th>
          <th nz-th><span>用量规格</span></th>
          <th nz-th style="min-width: 80px;"><span>推荐商品</span></th>
          <th nz-th><span>排序</span></th>
        </tr>
      </thead>
      <tbody nz-tbody>
        <tr nz-tbody-tr *ngFor="let data of nzTable.data">
          <td nz-td class="m-set-panel">
            <i nz-tooltip="新增" class="anticon anticon-plus-square" (click)="addMaterial()"></i>
            <i nz-tooltip="删除" class="anticon anticon-minus-square" (click)="deleteMaterial(data)"></i>
          </td>
          <td nz-td>
            <div *ngIf="!data.isNameShow" class="select_panel">
              <nz-input [nzType]="'search'"
                [nzPlaceHolder]="'请输入关联商品名称/编号'" [(ngModel)]="data.sn" 
                style="width: 200px;" 
                (nzOnSearch)="searchMaterial($event, data)">
              </nz-input>
              <nz-select style="width: 200px;"
                id="searchName"
                [(ngModel)]="data.sn"
                (ngModelChange)="changeMaterialItem(data)"
                [nzPlaceHolder]="'请输入关联商品名称/编号'" 
                nzAllowClear>
                <nz-option
                  *ngFor="let option of data.searchlist"
                  [nzLabel]="option.name"
                  [nzValue]="option.id">
                </nz-option>
              </nz-select>  
              <!-- <nz-select
                style="width: 200px;"
                nzKeepUnListOptions
                [nzPlaceHolder]="'请输入原料关键字'"
                [(ngModel)]="data.sn"
                (ngModelChange)="changeMaterialItem(data)"
                (nzSearchChange)="searchMaterial($event, data)"
                [nzNotFoundContent]="'无法找到'"
                nzShowSearch>
                <nz-option
                  *ngFor="let option of data.searchlist"
                  [nzLabel]="option.name"
                  [nzValue]="option.id">
                </nz-option>
              </nz-select> -->
              <span class="select_panel--err" *ngIf="searchlistError.bool">{{ searchlistError.title }}</span>
            </div>
            <p *ngIf="data.isNameShow">{{data.sn}}</p>
            <!-- <nz-input [(ngModel)]="data.sn" (click)="data.isNameShow = true;" [nzPlaceHolder]="'请输入原料关键字'" *ngIf="!data.isNameShow" style="width: 200px;"></nz-input> -->
          </td>
          <td nz-td>{{data.name}}</td>
          <td nz-td>
            <!-- 上架 online 上架  offline 下架-->
            <span class="m-grounding" *ngIf="data.ylStatus === 'online'">
              上架
            </span>
          </td>
          <td nz-td>
            <nz-input [nzType]="'number'" [(ngModel)]="data.dosage" 
              style="width: 60px;" (ngModelChange)="numberMax(data)">
            </nz-input> <span>{{ materialParams.unit | enum: materialType }}</span>
          </td>
          <td nz-td nzCheckbox>
            <label nz-checkbox [(ngModel)]="data.isChecked">
            </label>
          </td>
          <td nz-td>
            <nz-input [nzType]="'number'" [(ngModel)]="data.order" 
              style="width: 50px;">
            </nz-input>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>

</div>

<div class="footer_panel">
  <div class="m-form-sub">
    <a (click)="save()">确认</a><!--
    --><a (click)="back()">取消</a>
  </div>
</div> 

